<script setup>
import MyGoodsItem from '@/components/MyGoodsItem.vue'
// 导入图标
import { ArrowRight } from '@element-plus/icons-vue'
import { getAllGoods, getAllCategoryService, getGoodsByCidService } from '@/api/goods'
import { ref } from 'vue'
// 当前分类
const activeName = ref(0)

// 存储商品数据
const goodsList = ref([])

// 存储系列
const categoryList = ref([])

const getCategoryList = async () => {
  const {
    data: { data }
  } = await getAllCategoryService()
  categoryList.value = data
  categoryList.value.unshift({
    id: '',
    name: '全部'
  })
}

getCategoryList()

const tablePage = ref({
  pageNum: 1, // 显示的当前页
  pageSize: 15, // 一页显示的数据条数
  total: 0 // 存储商品总数量
})

// 调用接口请求
const getGoodsList = async () => {
  const { pageSize, pageNum } = tablePage.value
  const { data } = await getAllGoods(pageNum, pageSize)
  tablePage.value.total = parseInt(data.count)
  goodsList.value = data.data
}

getGoodsList()

// 分类切换事件
const tabChange = async () => {
  if (activeName.value != 0) {
    // 不是 0 -> 代表选择的是其他项
    // 其他项调用这个接口
    const {
      data: { data }
    } = await getGoodsByCidService(activeName.value)
    // console.log(data);
    goodsList.value = data
  } else {
    // 调用获取全部数据接口
    getGoodsList()
  }
}
</script>

<template>
  <div class="page">
    <div class="breadcrumb">
      <div class="content">
        <el-breadcrumb :separator-icon="ArrowRight">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>全部商品</el-breadcrumb-item>
          <el-breadcrumb-item>分类</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="nav">
          <!-- 标签页 -->
          <div class="title">分类</div>
          <el-tabs class="tabs" type="card" v-model="activeName" @tab-change="tabChange">
            <el-tab-pane
              :label="item.name"
              :name="item.id"
              v-for="item in categoryList"
              :key="item.id"
            ></el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <!-- 商品显示 -->
    <div class="products">
      <MyGoodsItem :goods="goodsList"></MyGoodsItem>
    </div>
    <!-- 分页器 -->
    <el-pagination
      class="pagination"
      background
      layout="prev, pager, next"
      :total="tablePage.total"
      v-model:page-size="tablePage.pageSize"
      v-model:current-page="tablePage.pageNum"
      @prev-click="getGoodsList()"
      @next-click="getGoodsList()"
      @current-change="getGoodsList()"
    />
  </div>
</template> 
<style lang="less" scoped>
.breadcrumb {
  margin-top: 10px;
  background-color: white;
  .content {
    width: 1226px;
    margin: 0 auto;

    .el-breadcrumb {
      font-size: 16px;
    }

    .nav {
      margin-top: 15px;
      display: flex;
      align-items: center;

      .title {
        font-weight: bold;
        font-size: 16px;
        margin-right: 20px;
      }

      .tabs {
        flex: 1;
      }

      ::v-deep .el-tabs__header {
        margin: 0;
      }
    }
  }
}

.products {
  width: 1240px;
  overflow: hidden;
  margin: 0 auto;
  margin-top: 14px;
  transform: translateX(-14px);
}
.pagination {
  width: 1226px;
  margin: 0 auto;
  margin-top: 10px;
  padding-bottom: 20px;
  display: flex;
  justify-content: center;
}
</style>